<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </u-sticky>
    <div id="app" v-if="current===0">
      <div class="content">
        <u-alert-tips type="primary" description="打开抖音APP，扫码成功后点击同意按钮完成授权" :desc-style="descStyle" style="margin-top: 10px"></u-alert-tips>
        <u-alert-tips type="primary" description="扫码方法：保存二维码到相册，打开抖音app通过扫一扫功能，选择相册扫码，选择刚刚保存的授权二维码即可开始授权" :desc-style="descStyle2" style="margin-top: 10px;width: 363px"></u-alert-tips>
        <div class="imgs">
          <img :src="'data:image/png;base64,' + QRCode" alt="QR Code" style="width: 200px;height: 200px"/>
        </div>
        <div class="authBtn" @click="saveQrcode">保存二维码</div>
        <div class="tip">

          <div class="title">【泛尚传媒】申请以下授权：</div>
          <div class="item">获取您的头像/昵称</div>
          <!--          <div class="item">为您的橱窗添加商品</div>-->
          <!--          <div class="item">获取您的橱窗销量</div>-->
          <!--          <div class="item">获取您的推广订单详情</div>-->

        </div>
      </div>
    </div>
    <div id="app" v-if="current===1">
      <!--      <web-view :src="webViewUrl" style="width: 374.2px;height: 580px;top: 30px;"></web-view>-->


      <div class="content" style="margin-top: -175px;width: 310px">
        <u-alert-tips type="primary" description="点击下方按钮复制链接并使用浏览器打开，成功登录账号完成授权，然后返回本小程序点击‘我已授权’按钮，查看授权结果" :desc-style="descStyle" style="margin-top: 50px"></u-alert-tips>

        <div class="authBtn" @click="copyLink">复制链接</div>
        <div class="authBtn" @click="authFinish" style="background:#447ce0">我已授权</div>
        <div class="tip">
          <div class="title">【泛尚传媒】申请以下授权：</div>
          <div class="item">获取您的头像/昵称</div>
        </div>
      </div>
    </div>

  </view>
</template>


<script>

const API = require('../../../utils/api/douyin.js').default;
const $ = require('../../../utils/api.js');

export default {
  name: "index",
  data() {
    return {
      descStyle: {
        color: "blue"
      },
      descStyle2:{
        color: "#ff9900"
      },
      type: null,
      timerId: null,
      token: "",
      webViewUrl: "",
      current: 0,
      list: [{
        name: '扫码授权'
      }, {
        name: '手机号授权'
      }],
      QRCode: '',
    }
  },
  onLoad(option) {
    this.type = option.type
    this.webViewUrl = "https://open.douyin.com/platform/oauth/connect?client_key=aw6o7mdniw8qsxp8&response_type=code&scope=user_info,trial.whitelist,renew_refresh_token&redirect_uri=https://portal.fscmkjznb.com/pagesA/thirdAccount/douyin/authSuccess&state=" + this.type
  },
  created() {
    this.getQrcode()
  },
  beforeDestroy() {
    clearInterval(this.timerId); // 防止内存泄漏，清除定时器
  },
  methods: {
    copyLink(){
      this.copy(this.webViewUrl)
    },
    authFinish(){
      $.go('/pagesA/thirdAccount/index?type=1', 2)
    },
    saveQrcode() {
      let saveImg = this.QRCode;//去掉data:image/png;base64,
      uni.getFileSystemManager().writeFile({
        filePath: wx.env.USER_DATA_PATH + '/QRCode.png',
        data: saveImg,
        encoding: 'base64',
        success: res2 => {
          uni.saveImageToPhotosAlbum({
            filePath: wx.env.USER_DATA_PATH + '/QRCode.png',
            success: function (res) {
              uni.showToast({
                title: "保存成功,请在相册查看",
                icon: "none"
              });
            },
            fail: function (res) {
              uni.showToast({
                title: "保存失败，请稍后重试",
                icon: "none"
              });
            }
          })
        },
        fail: err2 => {
          console.log(err2)
        }
      })
    },
    change(index) {
      clearInterval(this.timerId);
      if (index === 0) {
        this.getQrcode()
      }
      this.current = index;
    },
    getQrcode() {
      const self = this;
      $.ajax({
        url: API.getQrCode,
        data: {},
        method: 'GET',
        success(res) {
          self.QRCode = res.data.data.qrcode
          self.token = res.data.data.token
          self.startTimer()
        }
      });
    },
    checkQrcode() {
      const self = this;
      $.ajax({
        url: API.checkQrCode,
        data: {
          token: self.token,
          type: self.type
        },
        method: 'GET',
        success(res) {
          if (res.data.data.status === "confirmed") {
            //授权完成
            clearInterval(this.timerId);
            $.$toast("授权成功");
            $.go('/pagesA/thirdAccount/index?type=1', 2, 2000)
          }
        }
      });
    },
    startTimer() {
      this.timerId = setInterval(() => {
        this.checkQrcode()
        // 这里可以写需要重复执行的代码
      }, 1000)
    }
  },
}
</script>


<style scoped>
.authBtn {
  width: 161px;
  height: 35px;
  background: #fd4c60;
  color: #fff;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  border-radius: 25px;
  margin-top: 10px;
}

.content .imgs .icon {
  width: 60px;
  height: 60px;
}

.content .imgs .exchange {
  width: 40px;
  height: 40px;
  margin: 0 20px;
}

.content .imgs .icon {
  width: 60px;
  height: 60px;
}

.content .imgs {
  display: flex;
  align-items: center;
}

.content {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 130px;
}

#app {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 77vh;
}

.tip {
  font-size: 20px;
  color: #333;
  text-align: left;
}

.tip .item {
  font-size: 16px;
  color: #888;
  position: relative;
  padding-left: 30px;
  line-height: 30px;
}


.tip .title {
  margin: 20px 0 10px;
}

.tip .item::after {
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
